<template>
	<view class="animationBox">
		<view class="animationBox-shadow" v-if="modalShow" @click="modalShow=false">
			<div class="bounceIn animated animationBox-box" v-if="modalShow">
				<div class="jelly-triangle">
					<div class="jelly-triangle__dot"></div>
					<div class="jelly-triangle__traveler"></div>
				</div>
				<svg width="0" height="0" class="jelly-maker">
					<defs>
						<filter id="uib-jelly-triangle-ooze">
							<feGaussianBlur in="SourceGraphic" stdDeviation="7.3" result="blur"></feGaussianBlur>
							<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
								result="ooze"></feColorMatrix>
							<feBlend in="SourceGraphic" in2="ooze"></feBlend>
						</filter>
					</defs>
				</svg>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalShow: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.animationBox {

		// 自定义模态框样式
		.animationBox-shadow {
			position: fixed;
			inset: 0px;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 999;
			background: rgba(0, 0, 0, 0.5);
		}

		.animationBox-box {
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 10px;
			top: 0;
			width: 80%;
			height: 260rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.animated {
			-webkit-animation-duration: 1s;
			animation-duration: 1s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}

		.animated.infinite {
			-webkit-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
		}

		.animated.hinge {
			-webkit-animation-duration: 2s;
			animation-duration: 2s;
		}

		/*the animation definition*/
		@-webkit-keyframes bounceIn {

			0%,
			100%,
			20%,
			40%,
			60%,
			80% {
				-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
				transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
			}

			0% {
				opacity: 0;
				-webkit-transform: scale3d(.3, .3, .3);
				transform: scale3d(.3, .3, .3)
			}

			20% {
				-webkit-transform: scale3d(1.1, 1.1, 1.1);
				transform: scale3d(1.1, 1.1, 1.1)
			}

			40% {
				-webkit-transform: scale3d(.9, .9, .9);
				transform: scale3d(.9, .9, .9)
			}

			60% {
				opacity: 1;
				-webkit-transform: scale3d(1.03, 1.03, 1.03);
				transform: scale3d(1.03, 1.03, 1.03)
			}

			80% {
				-webkit-transform: scale3d(.97, .97, .97);
				transform: scale3d(.97, .97, .97)
			}

			100% {
				opacity: 1;
				-webkit-transform: scale3d(1, 1, 1);
				transform: scale3d(1, 1, 1)
			}
		}

		@keyframes bounceIn {

			0%,
			100%,
			20%,
			40%,
			60%,
			80% {
				-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
				transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
			}

			0% {
				opacity: 0;
				-webkit-transform: scale3d(.3, .3, .3);
				-ms-transform: scale3d(.3, .3, .3);
				transform: scale3d(.3, .3, .3)
			}

			20% {
				-webkit-transform: scale3d(1.1, 1.1, 1.1);
				-ms-transform: scale3d(1.1, 1.1, 1.1);
				transform: scale3d(1.1, 1.1, 1.1)
			}

			40% {
				-webkit-transform: scale3d(.9, .9, .9);
				-ms-transform: scale3d(.9, .9, .9);
				transform: scale3d(.9, .9, .9)
			}

			60% {
				opacity: 1;
				-webkit-transform: scale3d(1.03, 1.03, 1.03);
				-ms-transform: scale3d(1.03, 1.03, 1.03);
				transform: scale3d(1.03, 1.03, 1.03)
			}

			80% {
				-webkit-transform: scale3d(.97, .97, .97);
				-ms-transform: scale3d(.97, .97, .97);
				transform: scale3d(.97, .97, .97)
			}

			100% {
				opacity: 1;
				-webkit-transform: scale3d(1, 1, 1);
				-ms-transform: scale3d(1, 1, 1);
				transform: scale3d(1, 1, 1)
			}
		}

		.bounceIn {
			-webkit-animation-name: bounceIn;
			animation-name: bounceIn
		}

		// 动画
		.jelly-triangle {
			--uib-size: 42px;
			--uib-speed: 1.25s;
			--uib-color: #fe7c24;
			position: relative;
			height: var(--uib-size);
			width: var(--uib-size);
			filter: url('#uib-jelly-triangle-ooze');
		}

		.jelly-triangle__dot,
		.jelly-triangle::before,
		.jelly-triangle::after {
			content: '';
			position: absolute;
			width: 33%;
			height: 33%;
			background: var(--uib-color);
			border-radius: 100%;
		}

		.jelly-triangle__dot {
			top: 6%;
			left: 30%;
			animation: grow0 var(--uib-speed) ease infinite;
		}

		.jelly-triangle::before {
			bottom: 6%;
			right: 0;
			animation: grow0 var(--uib-speed) ease calc(var(--uib-speed) * -0.666) infinite;
		}

		.jelly-triangle::after {
			bottom: 6%;
			left: 0;
			animation: grow0 var(--uib-speed) ease calc(var(--uib-speed) * -0.333) infinite;
		}

		.jelly-triangle__traveler {
			position: absolute;
			top: 6%;
			left: 30%;
			width: 33%;
			height: 33%;
			background: var(--uib-color);
			border-radius: 100%;
			animation: triangulate var(--uib-speed) ease infinite;
		}

		.jelly-maker {
			width: 0;
			height: 0;
			position: absolute;
		}

		@keyframes triangulate {

			0%,
			100% {
				transform: none;
			}

			33.333% {
				transform: translate(120%, 175%);
			}

			66.666% {
				transform: translate(-95%, 175%);
			}
		}

		@keyframes grow0 {

			0%,
			100% {
				transform: scale(1.5);
			}

			20%,
			70% {
				transform: none;
			}
		}

	}
</style>
